import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入vuex实例
import store from '../store'

// 导入路由配置
import routes from './routes'

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

/**
 * 前端路由配置的两种方式
 * 1. hash模式(默认)
 * 2. history模式
 * 相同点：都可以实现路由配置和跳转（功能一样）
 * 不同点：路由的路径不一样=》hash模式带个#号；history不带
 * 使用场景：
 * 一般使用hash模式，因为hash可以运行在所有浏览器（兼容性好）；
 * 但是history模式只能在支持history api的浏览器运行
 */

const router = new VueRouter({
  routes
})

/**
 * 访问控制=》页面拦截
 * 需求：访问/user开头的路由，如果vuex没有存储token，跳回登录
 */
/**
 * to 去哪
 * from 从哪来
 * next 控制器=》通行
 */
router.beforeEach((to, from, next) => {
  /**
     * 步骤：
     * 1. 从vuex获取token
     * 2. 如果访问的是/user开头的页面=》需要有token才能访问
     */
  const { user } = store.state
  const loginConfig = { path: '/login', query: { redirectUrl: to.path } }
  if (to.path.startsWith('/user') && !user.token) {
    next(loginConfig)
  } else {
    next()
  }
})

export default router
